<template>
  <div>
    <NavBar
      :title="detail.name"
      :leftArrow="true"
      :clickLeft="() => $router.go(-1)"
    ></NavBar>
    <Step :active="detail.status - 1" />
    <Message type="pilot" :detail="detail" />
    <Address :detail="detail" />
    <div class="pilot">
      <div class="title">
        <span>飞手信息：</span>
      </div>
      <Pilot :columns="columns" :tableData="pilotList">
        <template
          slot="phone"
          slot-scope="{ row: { phone } }"
        >
          <!-- <a :href="`tel:${phone}`" rel="external nofollow" >{{ phone }}</a> -->
          <a 
            v-clipboard:copy="phone"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            rel="external nofollow"  
          >{{ phone }}</a>
        </template>
        <template slot="main" slot-scope="{ row }">
          <span>{{
            row.isMain === 1 ? "是" : "否"
          }}</span>
        </template>
      </Pilot>
    </div>
  </div>
</template> 

<script>
import NavBar from "@/components/NavBar";
import Step from "@/components/task/detail/Step";
import Message from "@/components/task/detail/Message";
import Address from '@/components/task/detail/Address'
import Pilot from '@/components/task/detail/Pilot'
import { Detail, TaskPilotList } from "@/api/task";
import { Toast } from 'vant';
export default {
  components: {
    NavBar,
    Step,
    Message,
    Address,
    Pilot,
  },
  data() {
    return {
      id: undefined,
      detail: {},
      columns: [
        { title: "飞手姓名", prop: "name", width: "25%", align: "center" },
        { title: "账号", prop: "username", width: "25%", align: "center" },
        { title: "手机", slot: "phone", width: "25%", align: "center" },
        { title: "主飞手", slot: "main", width: "25%", align: "center" },
      ],
      pilotList: [],
    };
  },
  methods: {
    async getDetail() {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      let { data } = await Detail(this.id);
      this.detail = data || {};
      Toast.clear()
    },
    async getTaskPilotList() {
      let {
        data: { data },
      } = await TaskPilotList({ taskId: this.id });
      this.pilotList = data || [];
    },
    onCopy: function (e) {
      console.log('You just copied: ' + e.text)
      Toast.success('复制成功')
    },
    onError: function (e) {
      Toast.success('复制失败')
      console.log('Failed to copy texts')
    }
  },
  created() {
    this.id = this.$route.params.id;
    this.getDetail();
    this.getTaskPilotList();
  },
};
</script>

<style lang="scss" scoped>

.pilot {
  margin-top: 0.4rem;
  padding-bottom: 1rem;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.32rem;
    font-weight: bold;
    padding: 0 0.4rem;
  }
}
.task-items {
  font-size: 0.346667rem;
  padding: 0 0.32rem;
  padding-top: 0.133333rem;
  color: #666;
}
</style>
